<template>
  <div class="mybody">
    <div class="mycontent">
      <v-sheet
        elevation="18"
        class="mx-auto kuang"
        height="500px"
        width="68%"
      >
        <div class="loginIntro">
          <div class="picture">
            <v-avatar>
              <v-img
                width="150px"
                height="150px"
                :src="`http://ly-chen.oss-cn-beijing.aliyuncs.com/image/e2WBtnwRM2QtZy8wh7HW.jpg`"
                aspect-ratio="1"
                class="grey lighten-2"
              >
                <template v-slot:placeholder>
                  <v-layout
                    fill-height
                    align-center
                    justify-center
                    ma-0
                  >
                    <v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
                  </v-layout>
                </template>
              </v-img>
            </v-avatar>
          </div>
          <div class="font-content">
            <p>愿你眉眼如初</p>
            <p>岁月如故</p>
            <p class="efont">May you be as happy as ever</p>
          </div>
        </div>
        <div class="loginform">
          <div class="logoFont">
            <svg-icon icon-class="l" size="45"></svg-icon>
            <svg-icon icon-class="c" size="45"></svg-icon>
            <span >-Music</span>
            <svg-icon icon-class="erji_02" size="45"></svg-icon>
          </div>
          <div class="form01">
            <el-form label-position="left" :model="loginForm" :rules="rules" ref="loginForm" label-width="80px">
              <el-form-item label="用户名" prop="name" >
                <el-input placeholder="请输入用户名"  v-model="loginForm.name"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input placeholder="请输入密码" v-model="loginForm.password" show-password></el-input>
              </el-form-item>
              <el-form-item>
                <el-alert v-show="showSuccess" class="local" title="登录成功" type="success" center show-icon></el-alert>
                <el-alert v-show="showError" class="local" title="用户名或密码错误" type="error" center show-icon></el-alert>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm('loginForm')" >登录</el-button>
                <el-button @click="goRegister">未注册</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </v-sheet>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import {mixin} from '../mixins'
import LoginLogo from '../components/LoginLogo'

export default {
  name: 'login-page',
  data: function () {
    var validateName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('用户名不能为空'))
      } else {
        callback()
      }
    }
    var validatePassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        callback()
      }
    }
    return {
      showSuccess: false, // 提示成功
      showError: false, // 提示失败
      loginForm: { // 登录用户名密码
        name: '',
        password: ''
      },
      rules: {
        name: [
          { validator: validateName, trigger: 'blur' }
        ],
        password: [
          { validator: validatePassword, trigger: 'blur' }
        ]
      }
    }
  },
  mounted: function () {
    this.changeIndex('登录')
    this.getSongLists()
    this.getSingerLists()
  },
  mixins: [mixin],
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let _this = this
          const params = this.$qs.stringify({
            username: this.loginForm.name,
            password: this.loginForm.password
          })

          axios.post(this.$store.state.HOST + "/login",params)
            .then(resp=>{
              this.goVerify()
              _this.showError = false
              _this.showSuccess = true
              _this.$store.commit('setLoginIn', true)
              window.sessionStorage.setItem('loginIn', JSON.stringify(true))
              setTimeout(function () {
                _this.changeIndex('首页')
                _this.$router.push({path: '/home-Page'})
              }, 1000)
            })
            .catch(() => {
              _this.showSuccess = false
              _this.showError = true
            })
        } else {
          this.$message.error("请输入正确信息")
          return false;
        }
      });
    },
    changeIndex (value) {
      this.$store.commit('setActiveName', value)
      window.sessionStorage.setItem('activeName', JSON.stringify(value))
    },
    login () {
      let _this = this
      var params = new URLSearchParams()
      params.append('username', _this.loginForm.username)
      params.append('password', _this.loginForm.password)
      // http://localhost:8080/api/loginVerify
      axios.post(_this.$store.state.HOST + '/api/loginVerify', params)
        .then(response => {
          // console.log('-----------获取登录信息---------------')
          // console.log(response.data)
          if (response.data.code === 1) {
            this.showError = false
            this.showSuccess = true
            this.copyMsg(response.data.userMsg[0])
            this.$store.commit('setLoginIn', true)
            window.sessionStorage.setItem('loginIn', JSON.stringify(true))
            setTimeout(function () {
              this.changeIndex('首页')
              this.$router.push({path: '/home-Page'})
              this.$router.go(0)
            }, 2000)
          } else {
            this.showSuccess = false
            this.showError = true
          }
        })
        .catch(failResponse => {})
    },
    copyMsg (item) {
      this.$store.commit('setUserId', item.id)
      window.localStorage.setItem('userId', JSON.stringify(item.id))
      this.$store.commit('setUsername', item.username)
      window.localStorage.setItem('username', JSON.stringify(item.username))
      this.$store.commit('setAvator', item.avator)
      window.localStorage.setItem('avator', JSON.stringify(item.avator))
      this.$store.commit('setSex', item.sex)
      window.localStorage.setItem('sex', JSON.stringify(item.sex))
      this.$store.commit('setMySignature', item.mySignature)
      window.localStorage.setItem('mySignature', JSON.stringify(item.mySignature))
      this.$store.commit('setCreateTime', item.createTime)
      window.localStorage.setItem('createTime', JSON.stringify(item.createTime))
    },
    goRegister () {
      this.$router.push({path: '/register-page'})
    }
  }
}
</script>

<style scoped>

.login{
  position: absolute;
  margin-left: 800px;
  top:150px;
  padding: 50px 50px 50px 30px;
  width: 300px;
  background-color: white;
  height: 210px;
  border-radius: 10px;
}
.login-btn {
  display: flex;
  justify-content: space-between;
}
.login-btn button{
  width: 100%;
  height:36px;
  margin-top: 50px;
  margin-left: 20px;
}
.local {
  position: absolute;
  width: 280px;
  top: -20px;
}
  .mybody{
    width: 100%;
    background-color: #e3f2fd;
  }
  .mycontent{
    margin-top: 100px;
    height: 600px;
  }
  .kuang {
    border-radius: 30px;
  }
  .loginIntro {
    float: left;
    height: 100%;
    width: 40%;
    background-color: #fdd836;
    border-bottom-left-radius: 30px;
    border-top-left-radius: 30px;
  }
  .picture {
    padding-top: 100px;
    padding-left: 180px;
  }
 .font-content {
   padding-top: 80px;
   text-align: center;
   font-size: 1.6em;
   font-weight: 700;
   font-family: 楷体;
 }
 .font-content p {
   margin: 0;
 }
  .font-content .efont {
    font-family: Vivaldi;
    font-weight: 900;
    font-size: 1.1em;
  }

  .loginform {
    height: 70%;
    width: 50%;
    float: left;
    margin-left: 20px;
    margin-top: 70px;
  }
  .logoFont {
    margin-left: 25%;
  }
  .logoFont span{
    font-size: 40px;
    font-weight: 700;
    font-family: "Bookman Old Style";
    display: inline-block;
    width: 160px;
  }
  .form01 {
    width: 70%;
    margin-left: 100px;
    margin-top: 60px;
  }
  .el-form .el-form-item >>> label{
    font-size: 1.5em;
    font-weight: 700;
    font-family: 楷体;
    color: black;
  }
.el-form .el-form-item {
  margin-top: 40px;
}
.el-form .el-form-item:last-child {
  margin-top: 40px;
  margin-left: 10px;
}
.el-form .el-form-item .el-button {
  margin-left: 10%;
}
</style>
